<template>
	<view class="page-body bg-white">
		<u-navbar is-back="true" title="积分">
			<view slot="right" @click="app.goPage('myLog?pageType=score')" class="fs30 u-p-r-20">积分明细</view>
		</u-navbar>
		<view class="menu_box">
			<view class="grid_img">
				<u-image :width="88" :height="88"   src="/static/public/images/pay/jifen.png"></u-image>
				<!-- <image src="/static/public/images/jifen_li.png" ></image> -->
			</view>
			<view class="mt30">
				我的积分: <text class="fs42 base-color">{{account.use_integral}}</text>
				<u-icon @click="show = true;" name="question-circle-fill" color="#ccc" top="-10" style="margin-left: 10rpx;"></u-icon>
			</view>
			<view class="mt20">
				<u-button @click="app.goPage('/pages/member/center/give')" shape="circle" size="medium" hover-class="none">赠送好友</u-button>
			</view>
			
		</view>
		<view class="u-p-l-20 u-p-r-20">
			<u-card title="日常任务" 
				padding="30" 
				border-radius="20" 
				box-shadow="0px 0px 27px 0px rgba(227, 226, 226, 0.66)" 
				:border="false" 
				:full="true" 
				:body-style="{padding:'0 30rpx'}">
				<view slot="body">
					<view v-for="(item,index) in taskList" class="u-flex u-col-between u-p-b-20 u-p-t-20">
						<image :src="baseUrl + item.img" mode="aspectFill"></image>
						<view class="u-flex-1 ml20">
							<view class="u-font-36">{{item.title}} <text class="ml40 u-font-32">+{{item.points}}积分</text></view>
							<view class="u-font-24">{{item.content}}</view>
						</view>
						<u-button v-if="item.tasking_status == 1" hover-class="none" size="mini" shape="circle">已完成</u-button>
						<u-button v-else-if="item.tasking_status == 2" @click="app.goPage(item.task_url)" hover-class="none" size="mini" shape="circle">去完成</u-button>
						<u-button v-else @click="receive(item.id)" class="defaultbtn" hover-class="none" size="mini" shape="circle">领取</u-button>
					</view>
					
				</view>
			</u-card>
		</view>
		
		<!-- 积分说明弹窗 -->
		<u-popup border-radius="20" mode="center" width="600" height="800" :closeable="true" v-model="show">
			<view class="p30 scoreDesc">
				<view class="title fs32">积分说明</view>
				<view class="desc">
					<scroll-view scroll-y="true" class="hb100">
						<rich-text :nodes="scoreDesc"></rich-text>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				baseUrl: this.config.baseUrl,
				account:{},
				userInfo:{},
				withdrawing:0,
				headimgurl: '',
				scoreDesc: '',
				show: false,
				taskList:[]
			}
		},
		onLoad() {
			this.getAccountInfo();
			let setting = uni.getStorageSync("setting");
			this.scoreDesc = setting.register_agreement;
			this.getTaskList();
		},
		onShow() {
			
		},
		onReady() {},
		methods: {
			getAccountInfo(){
				this.$u.post('member/api.wallet/getBalanceInfo').then(res => {
					this.account = res.data.account;
					this.withdrawing = res.data.withdrawing;
				});
			},
			getTaskList(){
				this.$u.post('member/api.tasking/taskList').then(res => {
					this.taskList = res.data;
				});
			},
			receive(id){
				this.$u.post('member/api.tasking/receiveTasking',{tasking_id:id}).then(res => {
					let taskStatus = res.data.taskStatus;
					let msg = '';
					if(taskStatus == 0){
						msg = '今日该任务已领取完';
					}else if(taskStatus == 1){
						msg = '领取成功';
					}else if(taskStatus == 2){
					}else{
						msg = res.msg;
					}
					this.getTaskList();
					uni.showToast({
						title:msg,
						icon: 'none'
					});
					setTimeout(this.getTaskList(), 2000)
				});
			}
		}
	}
</script>
	
<style lang="scss">
	@import "~@/pagesB/static/channel/css/wallet.scss";

	.grid_menu{
		.u-grid-item{
			border: 10rpx solid $page-color-base;
			line-height: 55rpx;
			
			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
				background-color: #f9f9f9 !important;
				padding: 30rpx;
			}
			.titel{
				color: $font-color-light;
			}
			
			.money{
				height: 55rpx;
				margin-top: 20rpx;
				font-weight: 700;
				font-size: 36rpx;
			}
		}
	}
	.grid_img{
		display: flex;
		    justify-content: center;
		// width: 88rpx;
		// height: 88rpx;
		margin-top: 70rpx;
		// display: flex; 
		// justify-content: center;
	}
	.scoreDesc{
		position: relative;
		
		.title{
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
		}
		.desc{
			margin-top: 50rpx;
			height: 700rpx;
		}
	}
</style>
